<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>echartTest</title>
</head>
<body>
	<c:url value="/" var="baseUrl" />
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main" style="height: 400px"></div>
	<!-- ECharts单文件引入 -->
	<script src="${baseUrl}js/echart/echarts.js"></script>
	<script type="text/javascript">
		// 路径配置
		require.config({
			paths : {
				echarts : '${baseUrl}js/echart'
			}
		});

		// 使用
		require([ 'echarts', 'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
		], function(ec) {
			// 基于准备好的dom，初始化echarts图表
			var myChart = ec.init(document.getElementById('main'));

			var option = {
				tooltip : {
					show : true
				},
				legend : {
					data : [ '衣服', '肉类' ]
				},
				xAxis : [ {
					type : 'category',
					data : [ "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" ]
				}, {
					type : 'category',
					data : [ "牛肉", "羊肉", "猪肉", "鸡肉", "鸭肉", "鱼肉" ]
				} ],

				yAxis : [ {
					name : '件',
					type : 'value'
				}, {
					name : 'kg',
					type : 'value'
				} ],
				series : [ {
					name : "衣服",
					type : "bar",
					data : [ 5, 20, 40, 10, 10, 20 ]
				}, {
					name : "肉类",
					type : "bar",
					yAxisIndex : 1,
					data : [ 15, 25, 45, 50, 70, 30 ]
				} ]
			};
			// 为echarts对象加载数据 
			myChart.setOption(option);
		});
	</script>
</body>
</html>